<template>
<div class="dusafyudg">
  <div class="dsaguydfu">
    <van-icon name="arrow-left" size="25" class="dsuyauyd" />
    <van-search
      v-model="value"
      show-action
      placeholder="请输入要搜索的内容"
      width="260px"
    >
      <template #action>
        <div @click="onClickButton(value)">搜索</div>
      </template>
    </van-search>
  </div>
  <hr />
  <div class="dsarytrd">
    <div class="title">
      历史搜索<van-icon name="delete-o" class="odsaguyd" size="25" />
    </div>
    <div class="a2">
      <div v-for="item in historyList" class="a1" @click="aa">{{ item }}</div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { searchclick } from "@/api/search";

let value = ref("");
let historyList = ref(["医生"]); //历史搜索记录，存本地
let router = useRouter();
//点击事件
let onClickButton = function (a) {
  // console.log(a,'q',historyList);
  //  historyList.value.unshift(a);
  router.push("./searchresult");
};

let aa = function () {
  router.push("./searchresult");
};
searchclick().then((a) => {
  // console.log(a,a.data.historysearch);
  a.data.historysearch.forEach((aa) => {
    // console.log(aa.name);
    historyList.value.unshift(aa.name);
  });
});
</script>

<style scoped>
.dusafyudg{background-color: #f2f2f2 !important;height: 100vh;}
body{background-color: #f2f2f2;}
.odsaguyd {
  margin-left: 240px;
}
.dsarytrd {
  padding: 20px 15px;
  background-color: #ffffff;
}
.title {
  font-size: 20px;
}
.dsaguydfu {
  display: flex;
  background-color: #ffffff;
}
.dsuyauyd {
  margin-top: 14px;
}
.a1 {
  background-color: #f5f2f0;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px;
  margin-right: 3px;
  text-align: center;
}
.a2 {
  display: flex;
  flex-flow: wrap;
}
</style>